<!-- 优惠券中心  -->
<template>
  <s-layout title="新闻资讯" :bgStyle="{ color: '#f2f2f2' }">
     <su-swiper
          class="ss-m-b-14"
          isPreview
          :list="imgUrls"
          dotStyle="tag"
          imageMode="widthFix"
          dotCur="bg-mask-40"
          :seizeHeight="320"
        />
    <su-sticky bgColor="#fff">
      <su-tabs
        :list="cates"
        keyName="name"
        :scrollable="false"
        @change="onTabsChange"
        :current="state.currentTab"
      ></su-tabs>
    </su-sticky>
    <s-empty
      v-if="hots.length==0"
      icon="/static/coupon-empty.png"
      text="暂无资讯"
    ></s-empty>
 <view class='list'>
				
					<view  class='flex middle art-item' v-for="(item,index) in hots" :key="index" @click="todetail(item)">
						<view class='cell-main'>
							<view class='name row2 mb10'>{{item.title}}</view>
							<view class="col-hui">{{item.createTime}}</view>
						</view>
							<image class="art-pic" :src='item.imageInput'></image>
					</view>
			
			</view>

    <uni-load-more
      v-if="hots.length > 0"
      :status="state.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
      @tap="loadmore"
    />
  </s-layout>
</template>

<script setup>
  import mall from '@/mall';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import { computed, reactive } from 'vue';
  import _ from 'lodash';
	import {
		getArticleCategoryList,
		getArticleList,
		getArticleHotList,
		getArticleBannerList
	} from '@/mall/api/home.js';
  const pagination = {
  page: 1,
					limit: 20,
  };
  // 数据
  const state = reactive({
    currentTab: 0,
    pagination: {
    page: 1,
					limit: 10,
    },
    loadStatus: '',
    type: '',
    cid:''
  });
  const hots = ref([])
  const imgUrls = ref([])
  const cates = ref([])
    onLoad((Option) => {
    getArticleHot();
getArticleBanner();
getArticleCate();
  });
  async function getArticleHot(){
    let {data} = await getArticleHotList()
    hots.value = data.list
  }
    async function getArticleBanner(){
    let {data} = await getArticleBannerList()
    imgUrls.value =data.list.map(e=>{return {src:e.imageInput,type:'image'}})
  }
      async function getArticleCate(){
    let {data} = await getArticleCategoryList()
    data.list.unshift({id:0,name:'热门'})
    cates.value =data.list
  }
  
  function onTabsChange(e) {
    state.pagination = pagination
    state.currentTab = e.index;
    state.cid = e.id;
    if (state.currentTab == 0) {
      getArticleHot();
    } else {
      state.pagination.page =1
      getArtlist();
    }
  }
  async function getArtlist() {
    state.loadStatus = 'loading';
    let {data} = await getArticleList(state.cid,state.pagination);
      if (state.pagination.page >= 2) {
        hots.value = _.concat( hots.value, data.list);
      } else {
        hots.value = data.list;
      }
       if (data.list.length < pagination.limit) {
           state.loadStatus = 'noMore';
       } else {
        state.loadStatus = 'more';
       
       }
    
  }
  async function getBuy(id) {
    const { error, msg } = await mall.$api.coupon.get(id);
    if (error === 0) {
      uni.showToast({
        title: msg,
      });
      setTimeout(() => {
        state.pagination = pagination
        getData();
      }, 1000);
    }
  }

  // 加载更多
  function loadmore() {
    if (state.loadStatus !== 'noMore') {
      if (state.currentTab != 0) {
       state.pagination.page +=1
       getArtlist()
      }
    }
  }
  function todetail(item) {
    mall.$router.go('/pages/public/newsDetail', {
      id: item.id,
    });
  }
  onReachBottom(() => {
    loadmore();
  });
</script>
<style lang="scss" scoped>
  .card-btn {
    // width: 144rpx;
    padding: 0 16rpx;
    height: 50rpx;
    border-radius: 40rpx;
    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
    color: #ffffff;
    font-size: 24rpx;
    font-weight: 400;
  }
  .border-btn {
    background: linear-gradient(90deg, var(--ui-BG-Main-opacity-4), var(--ui-BG-Main-light));
    color: #fff !important;
  }
  .disabled-btn {
    background: #cccccc;
    background-color: #cccccc !important;
    color: #fff !important;
  }
  .art-item{
    background-color: #fff;
    padding: 30rpx;
    box-sizing: border-box;
  }
  .art-pic{
    width: 160rpx;
    height: 120rpx;
  }
</style>
